<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas></canvas>
    <script>
      // Get the canvas context
      const canvas = document.querySelector("canvas");
      const ctx = canvas.getContext("2d");

      // Define the control points for the Bezier curve
      const p0 = { x: -100, y: 100 };
      const p1 = { x: 200, y: 50 };
      const p2 = { x: 300, y: 150 };
      const p3 = { x: 400, y: 100 };

      // Draw the Bezier curve on the canvas
      ctx.beginPath();
      ctx.moveTo(p0.x, p0.y);
      ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
      ctx.stroke();

      function drawLine(p0, p1, p2){
        let pot = solveXIntersect([[p0,x, p0.y], [p1,x, p1.y], [p2,x, p2.y]]);
        drawPoint(pot);
      }

      function drawPoint(p){
        ctx.fillStyle = "#ff0000";
        ctx.arc(p.x, p.y, 5, 0, Math.PI * 2, true); 
      }


      //y軸交點
      function solveXIntersect(bezierPoints) {
        const t =
          (bezierPoints[0][1] - bezierPoints[1][1]) 
          (bezierPoints[1][1] - bezierPoints[2][1]);
        return [
          (1 - t) * (1 - t) * bezierPoints[0][0] +
            2 * (1 - t) * t * bezierPoints[1][0] +
            t * t * bezierPoints[2][0],
          0,
        ];
      }
      //x軸交點
      function solveYIntersect(bezierPoints) {
        const t =
          (bezierPoints[0][0] - bezierPoints[1][0]) 
          (bezierPoints[1][0] - bezierPoints[2][0]);
        return [
          0,
          (1 - t) * (1 - t) * bezierPoints[0][1] +
            2 * (1 - t) * t * bezierPoints[1][1] +
            t * t * bezierPoints[2][1],
        ];
      }
    </script>
  </body>
</html>
